<template>
  <div class="invitation app-wrapper">
      <div class="warpper-card">
          <div class="card-main" :style="{'background-color': checkedColor}">
            <div class="media media-user clearfix">
                <div class="media-object pull-left"><img src="./img/giver_logo.jpg" alt=""></div>
                <div class="media-body overflow text-right">
                    <h5 class="media-heading">大鱼艺术教育</h5>
                    <p class="media-desc">诚邀您一起看直播</p>
                </div>
            </div>

            <figure class="invitation-figure">
                <img src="./img/home_banner.jpg" alt="#" />
                <figcaption class="figure-capition">CCAI 2019人工智能大会（青岛）</figcaption>
            </figure>
            <div class="sumary-info">
                <p>直播时间 : 2019/06/27 星期四 17:00</p>
                <p>From—微光直播平台</p>
                <div class="media media-2vcode clearfix">
                    <div class="media-object pull-left"><img src="./img/2vcode.png" alt=""></div>
                    <div class="media-body text-right">
                        <p>&nbsp;</p>
                        <p>长按识别二维码</p>
                        <p>立刻进入</p>
                    </div>
                </div>
            </div>
          </div>
      </div>
      <div class="template-panel">
          <h4 class="panel-head">点击查看自定义邀请模版</h4>
          <div class="panel-body">
              <div class="template-list swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" class="">
                    <swiper-slide 
                        v-for="(item, index) in colors"
                        :key="index"
                    >
                        <div
                            :style="{'background': item}"
                            @click="selectColor(item)"
                        >
                            <span class="modal-checkbox" 
                                :class="{'active': checkedColor == item}"
                            ></span>
                        </div>
                    </swiper-slide>
                </swiper>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {},
  data() {
    return {
        checkedColor: '#1549eb',
        colors: ['#1549eb', '#ac1f24', '#fbce01', '#3c79b0', '#5cceef', 'orange', 'yellowgreen'],
        swiperOption: {
            spaceBetween: 10,
            slidesPerView: 5,
            scrollbar: {scrollbarHide: true},
            pagination: {
                el: '.swiper-pagination',
                bulletElement: 'span',
                type : 'bullets'
            }
        }
    };
  },
  computed: {},
  methods: {
    selectColor(color){
        this.checkedColor = color;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.warpper-card {
    height: calc(100% - 200px);
    padding: 50px 40px;
    background: #000;
    
}

.card-main {
    padding: 30px;
    background-color: #1549eb;
    border-radius: 20px;
}

.media-user {
    margin-bottom: 30px;
   .media-object {
       width: 110px;
       height: 110px;
       margin-left: 20px;
       border-radius: 100%;
       overflow: hidden;
   } 

    .media-body {
        padding-top: 20px;
        font-size: 24px;;
        line-height: 1.75;
        color: #fff;
    }
   .media-heading { color: #fcba2e; }

}

.invitation-figure {
    padding: 30px;
    border-bottom: 2px dashed #ccc;
    background-color: #fff;
    > img {
        width: 100%;
        height: 256px;
    }

    .figure-capition {
        font-size: 32px;
        color: #1549eb;
        line-height: 45px;
        text-align: center;
    }

}

.sumary-info {
    padding: 40px 0;
    background-color: #fff;
    > p { text-align: center; }
    p {
        font-size: 24px;
        line-height: 2.5;
        color: #666;
    }
}

.media-2vcode {
    padding: 30px 45px 0 50px;
    .media-object {
        width: 130px;
        height: 130px;
        text-align: center;
    }
    .media-body {
        p { 
            color: #000; 
            line-height: 1.5; 
        }
    }
}

.template-panel {
    .panel-head {
        height: 40px;
        font-size: 24px;
        color: #747474;
        text-align: center;
        background-color: #f3f3f3;
        line-height: 40px;
    } 
}
.template-list {
    height: 160px;
    padding: 20px 30px;
    .swiper-wrapper { height: 120px; }
    .swiper-slide {
        width: 120px;
        height: 120px;
        
        > div {
            width: 100%;
            height: 100%;
            text-align: center;
            border-radius: 20px;
            background-color: #1549eb;
            position: relative;
        }
    }

    .modal-checkbox {
        position: static;
    }
}
</style>